<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
    }

    #upload {
      display: none;
    }

    .figure-caption {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-6">
      <div class="row mb-3">
        <label class="col-form-label col-3">用户名：</label>
        <div class="col-7">
          <input id="username" disabled class="form-control col-9" type="text" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="county">
            <option value="">--县--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="./imgs/default.jpg" class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>
  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-value.js"></script>
  <script src="./lib/request.js"></script>
  <script>
    // 获取省市县对象
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let county = document.querySelector('[name=county]')
      // 获取用户信息
      ; (async () => {
        // 发送Ajax请求，获取信息
        let { data: res } = await axios.get('/user/info')
        // 判断是否有图片，有则回填
        if (res.data.avatar) document.querySelector('img').src = res.data.avatar
        // 用户名回填
        document.querySelector('#username').value = res.data.username

        // 判断是否有省市县
        if (res.data.province && res.data.city && res.data.county) {
          // 获取市级promise对象
          let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
          // 获取县级promise对象
          let p2 = axios.get('/api/county', { params: { pname: res.data.province, cname: res.data.city } })
          // 使用promise.all方法分别获取市和县的响应数据
          let [{ data: shi }, { data: xian }] = await Promise.all([p1, p2])


          let arr = [`<option value="">--市--</option>`]
          shi.forEach(item => {
            arr.push(`<option value="${item}">${item}</option>`)
          })
          city.innerHTML = arr.join('')

          let arr2 = [`<option value="">--县--</option>`]
          xian.forEach(item => {
            arr.push(`<option value="${item}">${item}</option>`)
          })

          county.innerHTML = arr.join('')
          // 把省市县数据回填
          province.value = res.data.province
          city.value = res.data.city
          county.value = res.data.county
        }
      })()
      
    //  上传头像
    document.querySelector('figcaption').addEventListener('click', () => {
      document.querySelector('#upload').click()
    })
    document.querySelector('#upload').addEventListener('change', async function () {
      // 创建一个formData对象
      let fd = new FormData();
      // 创建文件对象
      let fileObj = this.files[0];
      // 把文件对象添加到FormData里
      fd.append('avatar', fileObj);
      // 发送Ajax请求
      let { data: res } = await axios.post('/user/avatar', fd)
      // 将图片渲染到页面
      document.querySelector('img').src = res.data
    })
      // 市区联动
      // 自吊用函数
      ; (async function () {
        // 发送Ajax请求
        let { data: res } = await axios.get('/api/province')
        // 创建一个数组
        let arr = [`<option value="">--省--</option>`]
        // 将获取到的数据遍历添加到数组当中
        res.forEach(item => {
          arr.push(`<option value="${item}">${item}</option>`)
        })
        province.innerHTML = arr.join('')
      })()
      // 当省级改变的时候获取市级
    province.addEventListener('change', async function () {
      // 当省级改变的时候让县级回到默认状态
      county.innerHTML = `<option value="">--县--</option>`
      // 判断如果省级是默认状态，就让市级回到默认状态，并且结束改变事件
      if (this.value === '') {
        city.innerHTML = `<option value="">--市--</option>`
        return
      }
      // 发送Ajax请求发送市级数据
      let { data: res } = await axios.get('/api/city', { params: { pname: this.value }})
      // 创建数组保存默认值
      let arr = [`<option value="">--市--</option>`]
      // 遍历市级数据添加到数组中
      res.forEach(item => {
        arr.push(`<option value="${item}">${item}</option>`)
      })
      // 将数组转换为字符串，渲染到页面
      city.innerHTML = arr.join('')
    })
    // 市级改变事件
    city.addEventListener('change', async function () {
      // 判断value是否为空
      if (this.value === '') {
        // 进去到这里，市级是默认值，那县级变成默认值
        county.innerHTML = `<option value="">--县--</option>`
        return
      }
      // 获取县级数据
      let { data: res } = await axios.get('/api/county', { params: { pname: province.value, cname: city.value } })
      // 创建数组默认值
      let arr = [`<option value="">--县--</option>`]
      // 遍历数组，县级数据添加到数组中
      res.forEach(item => {
        arr.push(`<option value="${item}">${item}</option>`)
      })
      // 渲染页面
      county.innerHTML = arr.join('')
    })

    // 提交保存数据
    // 获取button添加点击事件
    document.querySelector('button').addEventListener('click', async function (e) {
      // 阻止默认行为
      e.preventDefault()
      // 获取form里的值
      let data = val(document.querySelector('form'))
      // 发送Ajax请求发送到服务器
      let { data: res } = await axios.post('/user/info', data)
      // 判断状态码，提示信息
      if (res.status === 0) {
        alert(res.message)
      }
    })
  </script>
</body>

</html>